<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title></title>
	<link rel="stylesheet" href="../stylesheets/common.css" />
	<link rel="stylesheet" href="../stylesheets/table.css" />
	<link rel="stylesheet" href="../globalComponents/layer/skin/layer.css?v=1" />
</head>

<body>
	<div class="place">
		<span class="label-span">位置：</span>
		<span>资产管理 - 资产入库</span>
	</div>
	<div class="body-warp">
		<div class="panel filter-block">
			<form class="form-inline clearfix">
				<div class="form-group">
					<select class="form-select">
						<option selected="" value="">下拉菜单</option>
						<option value="选项1">选项1</option>
						<option value="选项2">选项2</option>
						<option value="选项3">选项3</option>
					</select>
				</div>
				<div class="form-group">
					<input class="form-control" id="search1" type="text" placeholder="输入搜索关键字"/>
				</div>
				<div class="form-group">
					<a href="javascript:void(0);" class="btn" id="search-btn"><i class="iconfont">&#xe61b;</i>搜索</a>
				</div>
			</form>
		</div>
		<!-- <div class="panel filter-block">
			<form class="form-inline clearfix">
				<div style="margin-right:700px;">
					
					<div class="form-group">
						<a href="javascript:void(0);" class="btn" id="search-btn"><i class="iconfont">&#xe619;</i>新增</a>
					</div>
					<div class="form-group">
						<a href="javascript:void(0);" class="btn" id="search-btn"><i class="iconfont">&#xe608;</i>删除</a>
					</div>
					<div class="form-group">
						<a href="javascript:void(0);" class="btn" id="search-btn"><i class="iconfont">&#xe62e;</i>复制</a>
					</div>
					<div class="form-group">
						<a href="javascript:void(0);" class="btn" id="search-btn"><i class="iconfont">&#xe62b;</i>打印标签</a>
					</div>

					 ui-droplist 控制按钮点击弹出框事件 ，若不想整个按钮控制，仅控制箭头，请增加 arrow-droplist和ui-selectbox-icon
					<div class="form-group ui-droplist arrow-droplist">
						<a href="javascript:void(0);" class="btn" id="search-btn">操作功能<span class="arrow-selectbox-container"><i class="ui-selectbox-icon"></i></span></a>
						<dl class="ui-selectbox-dropdown ui-droplist-option">
							<dd class="ui-selectbox-option"><i class="add-btn iconfont">&#xe649;</i>导入/导出</dd>
							<dd class="ui-selectbox-option"><i class="remove-btn iconfont">&#xe635;</i>下载导入模版</dd>
							<dd class="ui-selectbox-option"><i class="iconfont">&#xe613;</i>批量导入资产</dd>
							<dd class="ui-selectbox-option"><i class="iconfont">&#xe612;</i>导出资产</dd>
						</dl>
					</div>
					
				</div>
			</form>
		</div> -->
		<div class="panel table-tool-bar">
			<a id="addNew" class="btn" href="javascript:;"><i class="add-btn iconfont">&#xe619;</i>新增</a>
			<a class="btn" href="javascript:;"><i class="remove-btn iconfont">&#xe608;</i>删除</a>
			<a class="btn" href="javascript:;"><i class="mod-btn iconfont">&#xe608;</i>复制</a>
			<a class="btn" href="javascript:;"><i class="mod-btn iconfont">&#xe62b;</i>打印</a>
			<div class=" ui-droplist arrow-droplist">
				<a href="javascript:;" class="btn" id="search-btn">可加图标仅右边按钮下拉<span class="arrow-selectbox-container"><i class="ui-selectbox-icon"></i></span></a>
				<dl class="ui-selectbox-dropdown ui-droplist-option">
					<dd class="ui-selectbox-option"><i class="mod-btn iconfont">&#xe649;</i>导入/导出</dd>
					<dd class="ui-selectbox-option"><i class="mod-btn iconfont">&#xe635;</i>下载导入模版</dd>
					<dd class="ui-selectbox-option"><i class="add-btn iconfont">&#xe613;</i>批量导入资产</dd>
					<dd class="ui-selectbox-option"><i class="mod-btn iconfont">&#xe612;</i>导出资产</dd>
				</dl>
			</div>
		</div>
		<div class="panel main_panel">
			<table class="table" id="table"></table>
		</div>
	</div>

	<div id="hid_table" style="display:none;">
		<div class="grid-wrapper" style="height: auto;">
		  <table class="table" id="table">
		  	<colgroup>
		  		<col>
		  		<col>
		  		<col>
		  		<col>
		  		<col>
		  		<col>
		  	</colgroup>
		    <tbody>
		      	<tr>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>资产条码</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">01201610310001</td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>资产类别</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">通用设备</td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>资产名称</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">桌子</td>
		      	</tr>
		      	<tr>
	        		<td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>规格型号</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">100*150</td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>SN号</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">&nbsp;</td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>计量单位</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">张</td>
		      	</tr>
		      	<tr>
	        		<td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>金额</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">68.00</td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>使用部门</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">部门A</td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>使用人</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">李老师</td>
		      	</tr>
		      	<tr>
	        		<td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>购入时间</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">2016-10-31</td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>所属部门</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">部门B</td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>存放地址</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">一楼</td>
		      	</tr>
		      	<tr>
	        		<td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>使用期限（月）</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">60</td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>供应商</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">&nbsp;</td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>来源</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">购入</td>
		      	</tr>
		      	<tr>
	        		<td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>管理员</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">李老师</td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>状态</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;">在用</td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;" colspan="2">&nbsp;</td>
		      	</tr>
		      	<tr>
	        		<td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>备注</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;" colspan="5">&nbsp;</td>
		      	</tr>
		      	<tr>
	        		<td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;"><b>照片</b></td>
			        <td style="white-space: nowrap;background:#fff;border:1px solid #d2d2d2;text-align:left;" colspan="5"><img src="https://www.baidu.com/img/bd_logo1.png" style="border:1px solid #d2d2d2;width:200px;height:200px;"/></td>
		      	</tr>
		    </tbody>
		  </table>
		</div>
	</div>
	<script type="text/javascript" src="../ext/jquery/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="../ext/jquery/selectbox.js"></script>
	<script type="text/javascript" src="../ext/zw/grid.js"></script>
	<script type="text/javascript" src="../ext/zw/src/jquery-epaging.js"></script>
	<script type="text/javascript" src="../javascripts/tool.js"></script>
	<script type="text/javascript" src="../globalComponents/layer/layer.js"></script>
	<script>
	$(function () {
		/*初始化表格*/
		var grid = $('#table').grid({
			store: {
				data: {
					"s": 1,
					"d": [{
						"_id": "5518b89dbc547f6c18c98dff",
						"account": "admin",
						"password": "7c4a8d09ca3762af61e59520943dc26494f8941b",
						"__v": 0,
						"phone": "123",
						"role": 2,
						"sex": "男",
						"name": "管理员1"
					}, {
						"_id": "551b56c11911ce040e0b9887",
						"name": "123123",
						"account": "admin1",
						"password": "7c4a8d09ca3762af61e59520943dc26494f8941b",
						"phone": "123123",
						"__v": 0,
						"role": 1,
						"sex": "男"
					}, {
						"_id": "551b59b377886a8c1d20b65e",
						"name": "管理员",
						"account": "admin12a",
						"password": "601f1889667efaebb33b8c12572835da3f027f78",
						"sex": "男",
						"phone": "电话",
						"role": 2,
						"__v": 0
					}, {
						"_id": "551b64b577886a8c1d20b671",
						"name": "asdfasdf",
						"account": "asdfasdf",
						"password": "601f1889667efaebb33b8c12572835da3f027f78",
						"sex": "男",
						"phone": "",
						"role": 1,
						"__v": 0
					}, {
						"_id": "551b691677886a8c1d20b683",
						"name": "",
						"account": "1231231a",
						"password": "88ea39439e74fa27c09a4fc0bc8ebe6d00978392",
						"sex": "男",
						"phone": "",
						"role": 1,
						"__v": 0
					}, {
						"_id": "551b6d2177886a8c1d20b687",
						"name": "asdf",
						"account": "123123123",
						"password": "73da7bb9d2a475bbc2ab79da7d4e94940cb9f9d5",
						"sex": "男",
						"phone": "3123123",
						"role": 1,
						"__v": 0
					}, {
						"_id": "551b8a4877886a8c1d20b698",
						"name": "",
						"account": "admin123a",
						"password": "40bd001563085fc35165329ea1ff5c5ecbdbbeef",
						"sex": "男",
						"phone": "",
						"role": 1,
						"__v": 0
					}, {
						"_id": "551b8ac277886a8c1d20b69c",
						"name": "",
						"account": "admin1a",
						"password": "601f1889667efaebb33b8c12572835da3f027f78",
						"sex": "男",
						"phone": "",
						"role": 1,
						"__v": 0
					}, {
						"_id": "551b8e9c77886a8c1d20b6a0",
						"name": "",
						"account": "adfadf",
						"password": "40bd001563085fc35165329ea1ff5c5ecbdbbeef",
						"sex": "男",
						"phone": "",
						"role": 1,
						"__v": 0
					}, {
						"_id": "551b8ee477886a8c1d20b6a7",
						"name": "",
						"account": "123123adfs",
						"password": "b51f92f87f2d066dc6163aab994990608d5bf73b",
						"sex": "男",
						"phone": "",
						"role": 1,
						"__v": 0
					}],
					"total": 600
				}
			},
			schema: {
				thumbRenderer: function (rowData, grid, rowIndex) {
					return '<div class="thumb-content" style="width: 300px;">' +
						'<a class="thumb-title">瓯海教育OA系统</a>' +
						'<p class="thumb-section"><b>适用范围</b>：全区</p>' +
						'<p class="thumb-section"><b>应用类型</b>：系统应用</p>' +
						'<b>安装人数</b>：123456<b>&nbsp;&nbsp;&nbsp;&nbsp;使用人数</b>：12345' +
						'<p class="thumb-section"><b>使用状态</b>：启动</p>' +
						'<p class="thumb-section"><b>应用介绍</b>：这是一段应用介绍霍乱有多种传播途径什</p>' +
						'<p class="thumb-section thumb-btns"><a class="btn btn-mini btn-primary">编辑</a>\n<a class="btn btn-mini btn-primary">编辑</a>\n<a class="btn btn-mini btn-primary">编辑</a></p>'
					'</div>';
				}
			},
			tool: {
				pagingBar: true
			},
			columns: [{
				title: '帐号<i class="iconfont infotips popuptips" title="这里填写你要说明的内容">&#xe644;</i>',
				dataIndex: 'account',
				sortable: true,
				align: 'left',
				//add 新属性[不换行]，true
				nowrap: true,
				renderer: function (cellData) {
					return '<a href="javascript:;">' + cellData + '</a>';
				}
            }, {
				title: '姓名',
				dataIndex: 'name',
				sortable: true,
				formatter: {
					length: 3
				}
            }, {
				title: '单位',
				dataIndex: 'unit'
            }, {
				title: '管理员',
				dataIndex: 'role',
				renderer: function (cellData, rowData) {
					if(rowData.role == 1){
						return '<span class="red">否</span>';
					}else if(rowData.role == 2){
						return '<span style="color:#07b57a;">是</span>';
					}
				}
            }, {
				title: '评委',
				dataIndex: 'phone',
				renderer: function (cellData, rowData) {
					return '<span class="red">否</span>';
				}
            }, {
				title: '操作',
				//width: 300,
				nowrap: true,
				renderer: function (cellData, rowData, grid, cellIndex, rowIndex) {
					//注意，初始化各类控件(initWidge())的操作要放在最后

                // //文字型下拉按钮html样式：整个纯下拉 请增加 table-droplist 样式
                // var controls3 = '<a href="javascript:;" class="btn liketext btn-primary" id="search-btn">点我试试<i class="ui-selectbox-icon"></i></a>';
                // var link3 = '<dd class="ui-selectbox-option"><a href="http://www.baidu.com" target="_blank"><i class="add-btn iconfont">&#xe619;</i>我是个链接</a></dd>';
                // var preview3 = '<dd class="ui-selectbox-option" onclick="viewItem(' + rowIndex + ');"><i class="remove-btn iconfont">&#xe608;</i>预览</dd>';
                // var edit3 = '<dd class="ui-selectbox-option" onclick="editItem(' + rowIndex + ');"><i class="remove-btn iconfont">&#xe608;</i>编辑</dd>';
                // var remove3 = '<dd class="ui-selectbox-option" onclick="delItem(' + rowIndex + ');"><i class="remove-btn iconfont">&#xe608;</i>删除</dd>';

                // var containerHtml3 = '<div class="ui-droplist table-droplist">' + controls3 + '<dl class="ui-selectbox-dropdown ui-droplist-option">' + link3 + preview3 + edit3 + remove3 + '</dl></div>\n';

                // //文字型下拉按钮html样式2：只有右边箭头下拉 请增加 table-droplist 样式
                // var controls4 = '<a href="javascript:;" class="btn liketext btn-success" id="search-btn">仅右边按钮下拉<span class="arrow-selectbox-container"><i class="ui-selectbox-icon"></i></span></a>';
                // var link4 = '<dd class="ui-selectbox-option"><a href="http://www.baidu.com" target="_blank"><i class="add-btn iconfont">&#xe619;</i>我是个链接</a></dd>';
                // var preview4 = '<dd class="ui-selectbox-option" onclick="viewItem(' + rowIndex + ');"><i class="remove-btn iconfont">&#xe608;</i>预览</dd>';
                // var edit4 = '<dd class="ui-selectbox-option" onclick="editItem(' + rowIndex + ');"><i class="remove-btn iconfont">&#xe608;</i>编辑</dd>';
                // var remove4 = '<dd class="ui-selectbox-option" onclick="delItem(' + rowIndex + ');"><i class="remove-btn iconfont">&#xe608;</i>删除</dd>';

                // var containerHtml4 = '<div class="ui-droplist arrow-droplist table-droplist">' + controls4 + '<dl class="ui-selectbox-dropdown ui-droplist-option">' + link4 + preview4 + edit4 + remove4 + '</dl></div>\n';

                //下拉按钮html样式：整个纯下拉 请增加 table-droplist 样式
                var controls = '<a href="javascript:;" class="btn btn-primary" id="search-btn">按钮组<i class="ui-selectbox-icon"></i></a>';
                var link = '<dd class="ui-selectbox-option"><a href="http://www.baidu.com" target="_blank"><i class="iconfont">&#xe600;</i>链接</a></dd>';
                var preview = '<dd class="ui-selectbox-option" onclick="viewItem(' + rowIndex + ');"><i class="iconfont">&#xe62f;</i>预览</dd>';
                var edit = '<dd class="ui-selectbox-option" onclick="editItem(' + rowIndex + ');"><i class="iconfont">&#xe609;</i>编辑</dd>';
                var remove = '<dd class="ui-selectbox-option" onclick="delItem(' + rowIndex + ');"><i class="iconfont">&#xe608;</i>删除</dd>';

                var containerHtml = '<div class="ui-droplist table-droplist">' + controls + '<dl class="ui-selectbox-dropdown ui-droplist-option">' + link + preview + edit + remove + '</dl></div>\n';


                //单个按钮
                var primary = '<a class="btn btn-primary showInfo" href="javascript:;" onclick="viewItem(' + rowIndex + ');">主要(详情)</a>\n'
                var success = '<a class="btn btn-success" href="javascript:;" onclick="viewItem(' + rowIndex + ');">成功</a>\n'
                var info = '<a class="btn btn-info" href="javascript:;" onclick="viewItem(' + rowIndex + ');">普通</a>\n'
                var warning = '<a class="btn btn-warning" href="javascript:;" onclick="editItem(' + rowIndex + ');">警告</a>\n';
                var danger = '<a class="btn btn-danger" href="javascript:;" onclick="delItem(' + rowIndex + ');">危险</a>\n';

                return containerHtml + primary + success + info + warning + danger;
				}
            }], //add 初始化成功后回调函数
			event: {
				callback: function (that) {
					//事件回调 
				}
			}
		});

		/* 初始化控件 */
		initWidget();

		//初始化弹出条信息, require tool.js
		$('.infotips').popupTips();

		/*-- 弹框事件20161102 --*/
		$('a.showInfo').click(function(e){
			layer.open({
			    type: 1,
			    skin: 'layui-layer-rim', //加上边框
			    title: '详情',
			    fix: false,
			    shadeClose: true,
			    maxmin: true,
			    area: ['40%', 'auto'],
			    content: $('div#hid_table').html(),
			    end: function(){
			      //alert('123')
			    }
		  	});
		});
	});

	/*初始化控件*/
	function initWidget() {

		//下拉菜单初始化
		$('.form-select').each(function (index, el) {
			selectbox(this);
		});

		//初始化按钮下拉，require tool.js
		$('.ui-droplist').dropList();
	};

	</script>
</body>

</html>